<template>
  <xn-form-container :title="formData.id ? '编辑房态备注色' : '增加房态备注色'" :width="700" :visible="visible"
    :destroy-on-close="true" @close="onClose">
    <a-form ref="formRef" :model="formData" :rules="formRules">
      <a-form-item label="备注内容：" name="remark" :rules="[{ required: true, message: '必填项不能为空' }]">
        <a-textarea v-model:value="formData.remark" :allowClear="true" :showCount="true" :maxlength="30" />
      </a-form-item>
      <a-form-item label="颜色：" name="color" :rules="[{ required: true, message: '必填项不能为空' }]">
        <color-picker v-model:pureColor="formData.color" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
    </template>
  </xn-form-container>
</template>

<script setup name="bizItemForm">
import { ColorPicker } from "vue3-colorpicker";
import "vue3-colorpicker/style.css";
import tool from '@/utils/tool'
import { cloneDeep } from 'lodash-es'
import bizRoomcolorApi from '@/api/biz/bizRoomcolorApi'

// 抽屉状态
const visible = ref(false)
const emit = defineEmits({ successful: null })
const formRef = ref()
// 表单数据
const formData = ref({})
const submitLoading = ref(false)
const itemTypeOptions = ref([])

// 打开抽屉
const onOpen = (record) => {
  visible.value = true
  if (record) {
    let recordData = cloneDeep(record)
    formData.value = Object.assign({}, recordData)
  }
  itemTypeOptions.value = tool.dictList('是')
}
// 关闭抽屉
const onClose = () => {
  formRef.value.resetFields()
  formData.value = {}
  visible.value = false
}

// 验证并提交数据
const onSubmit = () => {
  formRef.value.validate().then(() => {
    submitLoading.value = true
    const formDataParam = cloneDeep(formData.value)
    bizRoomcolorApi
      .bizRoomColorSubmitForm(formDataParam)
      .then(() => {
        onClose()
        emit('successful')
      })
      .finally(() => {
        submitLoading.value = false
      })
  })
}
// 抛出函数
defineExpose({
  onOpen
})
</script>